<template>
  <div>
    <van-nav-bar :border="false" fixed title="推荐有奖" left-arrow @click-left="GOback" placeholder />
    <img class="imgTop" src="https://cangdu.org/elm/static/img/activity.png" alt="">
    <!-- 邀请好友 -->
    <section class="invite_firend">
      <div class="invite_firend_style" @click="show1 = true">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
        <p>邀请微信好友</p>
      </div>
      <div class="invite_firend_style" @click="show1 = true">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qq"></use>
        </svg>
        <p>邀请QQ好友</p>
      </div>
      <div class="invite_firend_style">
        <svg class="icon" aria-hidden="true" @click="show1 = true">
          <use xlink:href="#icon-erweima"></use>
        </svg>
        <p>面对面邀请</p>
      </div>
    </section>
    <!-- 累计收益与邀请人数 -->
    <section class="invite_num">
      <div class="invite_num_style">
        <p>累计收益</p>
        <p>
          <span>0</span>元
        </p>
      </div>
      <div class="invite_num_style invite_people">
        <p>成功邀请</p>
        <p>
          <span>0</span>人
        </p>
      </div>
    </section>
    <!-- 收益明细 -->
    <p class="income_detail">-收益明细-</p>
    <div class="incom_tips">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-hongbao"></use>
      </svg>
      <p>还不赶紧去邀请好友</p>
    </div>
    <!-- 弹框 -->
    <van-dialog v-model="show1" confirmButtonColor="#3199e8">
      <template #default>
        <div class="tip_icon">
          <span></span>
          <span></span>
        </div>
        <p class="tip_text">请在饿了么APP中打开</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show1: false
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.imgTop {
  width: 100%;
  height: 9rem;
}
.invite_firend {
  margin-top: 0.2rem;
  display: flex;
  padding: 1rem 0;
  background-color: #fff;
  .invite_firend_style {
    flex: 1;
    text-align: center;
    p {
      color: #333;
    }
  }
}
.invite_firend_style .icon {
  width: 2.3rem;
  height: 2.3rem;
}
.invite_firend_style:nth-of-type(2) .icon {
  color: #36adfb;
}
.invite_num {
  display: flex;
  margin-top: 1rem;
  color: #666;
  .invite_num_style {
    flex: 1;
    text-align: center;
    p span {
      font-size: 0.7rem;
      color: #ff5633;
      font-weight: 700;
    }
  }
}
.invite_people {
  border-left: 0.025rem solid #ddd;
  p span {
    color: #666 !important;
  }
}
.income_detail {
  color: #666;
  text-align: center;
  margin-top: 1rem;
}
.incom_tips {
  text-align: center;
  margin-top: 1rem;
  p {
    color: #999;
  }
  .icon {
    font-size: 1.2rem;
  }
}
</style>
